<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="姓名、用户名查询"
          @change="getData"
          clearable
          v-model="params.key"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-dept v-model="params.deptLevel" @change="getData"></select-dept>
      </el-form-item>
      <el-form-item>
        <select-credit-job v-model="params.job" @change="getData"></select-credit-job>
      </el-form-item>
      <!--<el-form-item>-->
      <!--<el-select v-model="params.status"-->
      <!--placeholder="员工状态">-->
      <!--<el-option value="有效"-->
      <!--name="1"></el-option>-->
      <!--<el-option value="禁用"-->
      <!--name="2"></el-option>-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" v-if="editable" @click="onEdit()">添加账号</el-button>
      </el-form-item>
      <!-- <div>
        <div>项目审批流程为项目A角->项目B角</div>
        <div>合同审批放款审批流程为项目A角 -> 农担部负责人 -> 有权审批人</div>
        <div class="text-danger">
          若流程能全部走完，需添加三个权限：
          两个业务经理（因为项目A角与B角不能为同一人），农担部负责人，有权审批人权限，
          （农担部负责人，有权审批人可为同一人，审批时，审批两次即可）
        </div>
      </div> -->
    </el-form>

    <el-table :data="tableData" border v-loading="loading">
      <el-table-column label="姓名" prop="realName" align="center"></el-table-column>
      <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
      <el-table-column label="职务" prop="empDescription" align="center"></el-table-column>

      <el-table-column label="电话" prop="phoneNumber" align="center"></el-table-column>

      <el-table-column label="角色" align="center">
        <template slot-scope="scope">
          <el-tag
            type="info"
            class="job-tag"
            v-for="(job, index) in scope.row.otherJobs"
            :key="index"
          >
            {{ job }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="用户名" prop="loginUserName" align="center"></el-table-column>

      <el-table-column label="操作" v-if="editable" align="center" width="180">
        <template slot-scope="scope" align="center">
          <el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            v-if="scope.row.job !== 'org_credit_super'"
            @click="confirmDelete(scope.row.userId)"
            type="danger"
            plain
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="query-pagination">
      <div class="text-muted p-2">共 {{ tableTotal }} 个账号</div>
    </div>

    <staff-edit :visible.sync="visible" :user-data="userData" @success="getData"></staff-edit>
  </div>
</template>

<script>
import SelectDept from '@/components/select/SelectDept'
import SelectCreditJob from '@/credit/components/select/SelectCreditJob'
import StaffEdit from '@/credit/views/cadmin/authority/StaffEdit'

import { getStaff, deleteUser } from '@/common/api/auth'
import { mapGetters } from 'vuex'
export default {
  components: {
    SelectDept,
    SelectCreditJob,
    StaffEdit,
  },

  props: {},

  data() {
    return {
      params: {
        deptId: '',
        index: 1,
        key: '',
        size: 6,
        job: '',
      },
      tableData: [],
      tableTotal: 0,
      loading: false,
      //
      visible: false,
      userData: null,
    }
  },

  computed: {
    ...mapGetters(['user']),
    job() {
      return this.$store.getters.user.job
    },
    editable() {
      return this.job === 'org_credit_super' || this.user.scopeArr.includes('agencyM')
    },
  },

  watch: {},

  created() {
    this.getData()
  },

  mounted() {},

  methods: {
    getData() {
      this.loading = true
      getStaff(this.params)
        .then(res => {
          // org_corp
          const data = res.data || []
          this.tableData = data.map(this.dataAdapter)
          this.tableTotal = this.tableData.length
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      const otherJobs = item.jobName ? [item.jobName] : []
      const names = (item.scopesName || '').split('|')
      for (const name of names) {
        if (name) {
          otherJobs.push(name)
        }
      }
      if (item.job === 'org_credit_super') {
        otherJobs.push('账号管理')
      }
      item.otherJobs = otherJobs
      return item
    },

    confirmDelete(val) {
      this.$confirm('确定删除该账号?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteUser(val).then(() => {
            this.$message.success('删除成功')
            this.getData()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },

    onEdit(data) {
      this.userData = data ? { ...data } : null
      this.visible = true
    },
  },
}
</script>

<style scoped>
.job-tag {
  height: 18px;
  line-height: 1.2;
  padding: 0 4px;
  margin: 0 1px;
}
</style>
